<template>
  <div class="personal-records" v-if="!getIsPhone">
    <el-table
      :data="dataList"
      style="width: 100%"
      @row-click="handleRowClick"
      >
      <el-table-column
        prop="orderTime"
        :formatter="formatDate"
        label="购买时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="dateNo"
        label="期号"
        width="140">
        <template v-slot:default="scope">
          <span>{{scope.row.dateNo}}期</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="lotteryType"
        label="玩法"
        width="215">
      </el-table-column>
      <el-table-column
        class="total-amount"
        prop="numbers"
        label="投注内容"
        width="340">
      </el-table-column>
      <el-table-column
        class="bonous"
        prop="refundRate"
        label="返点"
        width="110">
      </el-table-column>
      <el-table-column
        class="bonous"
        prop="amount"
        label="购买金额"
        width="130">
      </el-table-column>
      <el-table-column
        class="bonous"
        prop="lotteryState"
        label="状态"
        width="115">
        <template v-slot:default="scope">
          <span v-if="scope.row.lotteryState == 1 " style="color: red">{{scope.row.bonus}}</span>
          <span v-else>{{formatLotteryState(scope.row.lotteryState)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="load-more">
      load
    </div> -->
    <load-more @click="handleLoadMore"></load-more>
    <order-detail-pc 
      v-show="showDetails" 
      :detail="orderDetails"
      @click="hideDetail"
    ></order-detail-pc>
  </div>
  <div class="personal-records" v-else>
    <order-specification 
      @click.native="checkOrderDetail(item)"
      class="order-item"
      :item="item"
      v-for="item in dataList" :key="item.orderId"> 
      <div class="items">
        <div class="item">
          <span class="item-title">时间:</span><span>{{item.orderTime | formater}}</span>
        </div>
        <div class="item">
          <span class="item-title">玩法:</span><span>{{item.lotteryType}}</span>
        </div>
        <div class="item">
          <span class="item-title">购买:</span>
          <span class="item-amount">{{item.amount}}</span>
          <span class="item-bonus">(最高奖金:<span>{{item.bonus}}</span>)</span>
        </div>
      </div>
      <div class="lottery-state-wrapper">
        <lottery-state :state="item.lotteryState"></lottery-state>
      </div>
    </order-specification>
    
    <order-detail-phone :show="showDetails" @click="hideDetail" :detail="orderDetails"></order-detail-phone>
   
  </div>
</template>

<script>
import LoadMore from '@/components/base/load-more/load-more'
import OrderDetailPc from './order-detail-pc'
import OrderDetailPhone from './order-detail-phone'
import LotteryState from '@/components/base/lottery-state/lottery-state'
import OrderSpecification from '@/components/base/order-specification/order-specification'

import { findIndexById, formatDateNoYear } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    LoadMore,
    OrderDetailPc,
    OrderDetailPhone,
    LotteryState,
    OrderSpecification
  },
  props: {
    dataList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      showDetails: false,
      orderDetails: {}
    }
  },
  methods: {
     formatDate(row, column, cellValue) {
      return formatDateNoYear(cellValue)
    },
    formatLotteryState(state) {
      switch(state) {
        case 0: 
          return '未开奖'
          break;
        case 1: 
          return '已中奖'
          break;
        case 2: 
          return '未中奖'
          break;
        case 3: 
          return '已撤单'
          break;
      }
    },
    handleLoadMore() {
      this.page++
    },
    handleRowClick(row, column) {
      this.showDetails = true
      this.orderDetails = row
    },
    hideDetail() {
      this.showDetails = false 
      console.log('hide')
    },
    // 手机端查看详情
    checkOrderDetail(item) {
      this.showDetails = true
      this.orderDetails = item 
    },
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (max-width 750px)
    .order-content 
      box-sizing border-box 
      padding 10px
      .order-item 
        margin-bottom 10px 
        box-shadow 0 2px 3px #ddd
        .items 
          box-sizing border-box 
          padding 0 10px
          background-color #fff
          .item 
            line-height 2
            .item-title 
              margin-right 10px
            .item-amount 
              color $color-primary-green 
            .item-bonus 
              color $color-theme-red
            .at 
              color $color-theme-red
        .lottery-state-wrapper 
          position absolute
          top 10px
          right 10px
         
</style>